<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>秒杀成功页</title>
    <!-- 引入图标库-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--bootstrap-->
    <link rel="stylesheet" th:href="@{/static/resource/css/lib/bootstrap.min.css}"/>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_v7p87hrx9q.css">

    <!--    引入购物车css-->
    <link type="text/css" rel="stylesheet" th:href="@{/static/pear-admin/css/style.css}"/>

    <!--css-->
    <link rel="stylesheet" th:href="@{/static/resource/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/home.css}"/>
    <!--    layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">

</head>


<style>

    .topbar a:hover{
        color: orange;
    }

    .textDiv {
        width: 98%;
        height: 105px;
        border-radius: 10px;
        background-color: white;
        border: 2px solid gainsboro;
        margin-top: 10px;
    }

    .head,
    .context,
    .price {
        width: 95%;
        height: 24px;
        margin-left: 15px;
        font-size: 12px;
        margin-left: 8%;
    }

    .stat {
        height: 0;
        margin: 18px auto;
        border: 18px solid transparent;
        transform: rotate(45deg) translateY(-160px) translateX(8px);
        font-size: 12px;
        width: 85px;
        text-align: center;
        color: white;
        margin-left: 86%;
    }

    .darkgray{
        border-bottom-color: darkgray;
    }


    .blue {
        border-bottom-color: deepskyblue;
    }

    .green {
        border-bottom-color: lawngreen;
    }

    .red {
        border-bottom-color: red;
    }

    .head {
        margin-top: 10px;
    }
    #box{

        width: 100%;
        height: 700px;

    }
    #contentBox{
        width: 80%;
        height: 620px;
        margin: 0 auto;
        margin-top: 50px;
    }

    .infos1{
        width: 400px;
        height: 80px;
        float: left;
    }
    .infos2{
        width: 475px;
        height: 80px;
        float: left;
    }

    /***** footer 页面底部 start*/
    /*footer  footer_service*/
    .footer_service{
        padding: 30px 0;
        overflow: hidden;
        border-bottom: 1px solid #e0e0e0;
    }
    .footer_service ul{
        margin-right: -2px;
    }
    .footer_service ul li{
        float: left;
        width: 20%;
        height: 25px;
        font-size: 16px;
        line-height: 25px;
        border-right: 1px solid #e0e0e0;
        text-align: center;
    }

    /*footer  footer_link*/
    .footer_link{
        padding: 40px 0;
    }
    .footer_link dl{
        float: left;
        width: 160px;
        height: 112px;
        margin: 0;
    }
    .footer_link dt{
        margin: -1px 0 26px;
        font-size: 14px;
        line-height: 1.25;
        color: #424242;
    }
    .footer_link dd{
        margin: 10px 0 0;
        font-size: 12px;
    }

    .footer_contact{
        float: right;
        width: 245px;
        height: 112px;
        border-left: 1px solid #e0e0e0;
        text-align: center;
        color: #616161;
    }
    .footer_contact .phone{
        font-size: 26px;
        color: #ff6700;
    }

    .footer_site{
        background: #f5f5f5;
    }
    .footer_site p{
        margin: 32px 0;
        text-align: center;
    }
    /***** footer 页面底部 end*/

    /* 下拉框*/

    .dropbtn {
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        z-index: 100;
        margin-left:25px
    }

    .dropdown-content {
        display: none;
        background-color: #f9f9f9;
        min-width: 50px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}
</style>




<body>
<!-- jquery.js angular.js-->
<script th:src="@{/static/resource/lib/jquery.min.js}"></script>
<script th:src="@{/static/resource/lib/angular.js}"></script>

<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>
        <div class="topbar_info fr" style="width:220px">
            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>
            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>
            <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>
            <a sec:authorize="isAuthenticated()" class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>
            <a href="#" onclick="kefu(1)">人工客服</a>
            <div class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">
                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>
                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!--    content-->

<div id="box">


    <div id="contentBox">
        <span>我的秒杀:</span>
        <!--      一组-->
        <div class="textDiv" th:each="seckillSuccess:${seckillSuccesses}">
            <div style="width: 80px;height: 80px;border: 1px solid; float: left;">
                <img th:src="${seckillSuccess.getSecKill().getImg()}" style="width: 80px;height: 80px;border:1px solid">
            </div>

            <div class="infos1">
                <div class="head" style="float: left;">
                    <b>秒杀成功号：</b>
                    <span th:text="${seckillSuccess.getId()}"></span>
                </div>
                <div class="context" style="float: left;">
                    <b>商品名称：</b>
                    <span th:text="${seckillSuccess.getSecKill().getSeckillName()}"></span>
                </div>

                <div class="context">
                    <b>秒杀数量：</b>
                    <span>1件</span>
                </div>

            </div>

            <div class="infos2">
                <div class="head">
                    <b>秒杀成功时间：</b>
                    <span th:text="${seckillSuccess.getCreateTime()}"></span>
                </div>
                <div class="head">
                    <b>支付有效时间：</b>
                    <span>秒杀成功30分钟内</span>
                </div>
                <div class="price">
                    <b>订单价格：</b>
                    <b style="color: red;">[[${seckillSuccess.secKill.price}]]元</b>

                </div>
            </div>

            <button th:if="${seckillSuccess.state==0}" style="margin-top: 3%;"
                    type="button" th:onclick="zhifu([[${seckillSuccess.id}]],[[${seckillSuccess.secKill.seckillId}]])" class="layui-btn layui-btn-danger layui-btn-radius">去支付</button>

            <button th:if="${seckillSuccess.state!=0}" style="margin-top: 3%;"
                    type="button" class="layui-btn layui-btn-warm layui-btn-radius disabled">已支付</button>



        </div>
        <!--            -->


    </div>

    <!--            搜索分页-->

    <div id="searchPageDiv" style="width: 100%;height: 85px;">

        <div id="searchPage" style="margin:0 auto;width: 277px;height: 33.6px">
            <ul class="pagination">
                <!--            上一页-->
                <li th:if="${curPage==1}" class="disabled">
                    <a>&laquo;</a>
                </li>

                <li th:if="${curPage>1}">
                    <a style="cursor: pointer;" th:onclick="prePage([[${curPage}]])">&laquo;</a>
                </li>

                <li th:id="p1" class="active">
                    <a style="cursor: pointer;" th:onclick="pagechange(1)"  th:text="1"></a>
                </li>


                <li th:each="index:${#numbers.sequence(2, 5)}" th:if="${pagecount>=5}" th:id="'p'+${index}">
                    <a style="cursor: pointer;" th:onclick="pagechange([[${index}]])"  th:text="${index}"></a>
                </li>

                <li th:id="'p'+${index}" th:each="index:${#numbers.sequence(2, pagecount)}" th:if="${pagecount<5 and pagecount>=2}">
                    <a style="cursor: pointer;" th:onclick="pagechange([[${index}]])"  th:text="${index}"></a>
                </li>


                <!--            下一页-->

                <li th:if="${pagecount<=1}" class="disabled">
                    <a>&raquo;</a>
                </li>
                <li th:if="${pagecount>1}">
                    <a style="cursor: pointer;" th:onclick="nextPage([[${curPage}]])">&raquo;</a>
                </li>

            </ul>

        </div>
    </div>

    <!--        -->

</div>






<!--   -->

<!--footer-->
<footer class="footer">
    <div class="container">
        <div class="footer_service">
            <ul class="clearfix">
                <li><a href="">1小时快修服务</a></li>
                <li><a href="">7天无理由退货</a></li>
                <li><a href="">30天免费换货</a></li>
                <li><a href="">满200元包邮</a></li>
                <li><a href="">520余家售后网点</a></li>
            </ul>
        </div>

        <div class="footer_link clearfix">
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>购物指南</dd>
                <dd>支付方式</dd>
                <dd>配送方式</dd>
            </dl>

            <div class="footer_contact">
                <p class="phone">18420163207</p>

                <p><span style="">周一至周日 8:00-18:00</span>
                    <span style="display:none;">2月7日至13日服务时间 7:00-18:00</span><br>（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-primary btn-small" href="#">24小时在线客服</a>
            </div>
        </div>

    </div>

    <div class="footer_site">
        <div class="container">
            <div class="cart_log">
                <a href="" title="爱坤商城"></a>
            </div>
            <div>
                <p>底部</p>
            </div>
        </div>
    </div>
</footer>

<script>
    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }


    function zhifu(seckillsuccessid,seckillid) {

        window.location.href='/web/seckill/doPay/'+seckillsuccessid+'/'+seckillid;


    }

    //上一页
    function prePage(pgnum) {


        $.ajax({
            url: "/web/seckill/seckillSuccessData",
            data: {
                "from": pgnum - 1
            },
            type: "GET",
            success: function (json) {

                document.getElementById('contentBox').innerHTML = ""; //清空所有订单展示
                var html = '';
                html += ' <span>我的秒杀:</span>'
                for (var i = 0; i < json.seckillSuccesses.length; i++) {
                    html += '<div class="textDiv">'
                    html += ' <div style="width: 80px;height: 80px;border: 1px solid; float: left;">'
                    html += '<img style="width: 80px;height: 80px;border:1px solid" src=\"' + json.seckillSuccesses[i].secKill.img + '\"' + '>'
                    html += ' </div>'

                    html += '<div class="infos1">'
                    html += '<div class="head" style="float: left;">'
                    html += '<b>秒杀成功号：</b>'
                    html += '<span>' + json.seckillSuccesses[i].id + '</span></div>'


                    html += '<div class="context" style="float: left;">'
                    html += '<b>商品名称：</b>'
                    html += '<span>' + json.seckillSuccesses[i].secKill.seckillName + '</span>'
                    html += '</div>'


                    html += ' <div class="context">'
                    html += '<b>秒杀数量：</b>'
                    html += '<span>' + 1 + '件</span>'
                    html += ' </div>'
                    html+='</div>'


                    html += '<div class="infos2">'
                    html += '<div class="head">'
                    html += ' <b>秒杀成功时间：</b>'
                    html += '<span>' + json.seckillSuccesses[i].createTime + '</span>'
                    html += '</div>'


                    html += ' <div class="head">'
                    html += ' <b>支付有效时间：</b>'
                    html += '<span>' + '秒杀成功30分钟内</span>'
                    html += '</div>'

                    html += ' <div class="price"> <b>订单价格：</b>'

                    html += '<b style="color: red;">' + json.seckillSuccesses[i].secKill.price + '元</b>'


                    html+='</div>'
                    html+='</div>'

                    if(json.seckillSuccesses[i].state==0){

                        html+='<button style="margin-top: 3%;" type="button" onclick=\"';
                        html+='zhifu('+json.seckillSuccesses[i].id+','+json.seckillSuccesses[i].secKill.seckillId+')\" class="layui-btn layui-btn-danger layui-btn-radius"';
                        html+='>去支付</button>'

                    }

                    if(json.seckillSuccesses[i].state==1){

                        html+='<button style="margin-top: 3%;" type="button" ';
                        html+='class="layui-btn layui-btn-warm layui-btn-radius"';
                        html+='>已支付</button>'
                    }

                    html+='</div>'


                    html += '</div>'
                }


                $('#contentBox').append(html);


                //修改分页bar

                document.getElementById('searchPage').innerHTML = ''; //搜索页div清空

                var pageBarHtml = '';

                pageBarHtml += '<ul class="pagination">';

                var curPage = json.curPage;
                var pagecount = json.pagecount;


                var curPageGroup = json.curPageGroup;
                var pageGroup = json.pageGroup;

                if (curPage > 1) {
                    pageBarHtml += '<li><a style="cursor: pointer;" onclick=\"' + 'prePage(' + curPage + ')' + '\">&laquo;</a></li>'
                } else {
                    pageBarHtml += '<li class="disabled"><a>&laquo;</a> </li>';
                }

                if (pagecount <= 5) {
                    var phtml1 = '';
                    for (var i = 0; i < pagecount; i++) {
                        if ((i + 1) == curPage) {
                            phtml1 += '<li class="active" id=\"' + 'p' + (i + 1) + '\">';
                        } else {
                            phtml1 += '<li id=\"' + 'p' + (i + 1) + '\">';
                        }
                        phtml1 += '<a style="cursor: pointer;" onclick=\"' + 'pagechange(' + (i + 1) + ')' + '\">' + (i + 1) + '</a>'

                        phtml1 += '</li>'

                    }
                    pageBarHtml += phtml1;

                } else {
                    var size = 5;
                    var start = size * (curPageGroup - 1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if (curPageGroup < pageGroup) {
                        var phtml1 = '';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end = start + 5;
                        // console.log("end="+end)

                        for (var i = start; i < end; i++) {
                            if ((i + 1) == curPage) {
                                phtml1 += '<li class="active" id=\"' + 'p' + (i + 1) + '\">';
                            } else {
                                phtml1 += '<li id=\"' + 'p' + (i + 1) + '\">';
                            }
                            phtml1 += '<a style="cursor: pointer;" onclick=\"' + 'pagechange(' + (i + 1) + ')' + '\">' + (i + 1) + '</a>'

                            phtml1 += '</li>'
                        }
                        pageBarHtml += phtml1;

                    } else {//此时curPage为最后一组导航
                        var phtml1 = '';
                        var odd = json.odd;

                        var end = start + odd; //start+odd就ok了

                        for (var i = start; i < end; i++) {
                            if ((i + 1) == curPage) {
                                phtml1 += '<li class="active" id=\"' + 'p' + (i + 1) + '\">';
                            } else {
                                phtml1 += '<li id=\"' + 'p' + (i + 1) + '\">';
                            }
                            phtml1 += '<a style="cursor: pointer;" onclick=\"' + 'pagechange(' + (i + 1) + ')' + '\">' + (i + 1) + '</a>'

                            phtml1 += '</li>'
                        }
                        pageBarHtml += phtml1;

                    }

                }


                if (curPage == pagecount) {
                    pageBarHtml += '<li class="disabled"> <a>&raquo;</a></li>';
                } else {
                    pageBarHtml += '<li><a style="cursor: pointer;" onclick=\"nextPage(' + curPage + ')\">&raquo;</a></li>'
                }

                pageBarHtml += '</ul>';

                $('#searchPage').append(pageBarHtml);

            }

        })

    }


    //下一页
    function nextPage(pgnum) {

        $.ajax({
            url: "/web/seckill/seckillSuccessData",
            data: {
                "from": pgnum + 1
            },
            type: "GET",
            success: function (json) {
                console.log(json);
                console.log(json.seckillSuccesses.length)
                console.log(json.seckillSuccesses[0].id)

                document.getElementById('contentBox').innerHTML = ""; //清空所有订单展示
                var html = '';
                html += ' <span>我的秒杀:</span>'
                for (var i = 0; i < json.seckillSuccesses.length; i++) {
                    html += '<div class="textDiv">'
                    html += ' <div style="width: 80px;height: 80px;border: 1px solid; float: left;">'
                    html += '<img style="width: 80px;height: 80px;border:1px solid" src=\"' + json.seckillSuccesses[i].secKill.img + '\"' + '>'
                    html += ' </div>'

                    html += '<div class="infos1">'
                    html += '<div class="head" style="float: left;">'
                    html += '<b>秒杀成功号：</b>'
                    html += '<span>' + json.seckillSuccesses[i].id + '</span></div>'


                    html += '<div class="context" style="float: left;">'
                    html += '<b>商品名称：</b>'
                    html += '<span>' + json.seckillSuccesses[i].secKill.seckillName + '</span>'
                    html += '</div>'


                    html += ' <div class="context">'
                    html += '<b>秒杀数量：</b>'
                    html += '<span>' + 1 + '件</span>'
                    html += ' </div>'
                    html+='</div>'


                    html += '<div class="infos2">'
                    html += '<div class="head">'
                    html += ' <b>秒杀成功时间：</b>'
                    html += '<span>' + json.seckillSuccesses[i].createTime + '</span>'
                    html += '</div>'


                    html += ' <div class="head">'
                    html += ' <b>支付有效时间：</b>'
                    html += '<span>' + '秒杀成功30分钟内</span>'
                    html += '</div>'

                    html += ' <div class="price"> <b>订单价格：</b>'

                    html += '<b style="color: red;">' + json.seckillSuccesses[i].secKill.price + '元</b>'


                    html+='</div>'
                    html+='</div>'



                    if(json.seckillSuccesses[i].state==0){

                        html+='<button style="margin-top: 3%;" type="button" onclick=\"';
                        html+='zhifu('+json.seckillSuccesses[i].id+','+json.seckillSuccesses[i].secKill.seckillId+')\" class="layui-btn layui-btn-danger layui-btn-radius"';
                        html+='>去支付</button>'

                    }

                    if(json.seckillSuccesses[i].state==1){

                        html+='<button style="margin-top: 3%;" type="button" ';
                        html+='class="layui-btn layui-btn-warm layui-btn-radius"';
                        html+='>已支付</button>'
                    }

                    html+='</div>'


                    html += '</div>'
                }


                $('#contentBox').append(html);

                //修改分页bar

                document.getElementById('searchPage').innerHTML=''; //搜索页div清空

                var pageBarHtml='';

                pageBarHtml+='<ul class="pagination">';

                var curPage=json.curPage;
                var pagecount=json.pagecount;


                var curPageGroup=json.curPageGroup;
                var pageGroup=json.pageGroup;

                if(curPage>1)
                {
                    pageBarHtml+='<li><a style="cursor: pointer;" onclick=\"'+'prePage('+curPage+')'+'\">&laquo;</a></li>'
                }else {
                    pageBarHtml+='<li class="disabled"><a>&laquo;</a> </li>';
                }


                if(pagecount<=5)
                {
                    var phtml1='';
                    for (var i=0;i<pagecount;i++)
                    {
                        if((i+1)==curPage)
                        {
                            phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                        }else {
                            phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                        }
                        phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                        phtml1+='</li>'

                    }
                    pageBarHtml+=phtml1;

                }else {
                    var size=5;
                    var start=size*(curPageGroup-1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if(curPageGroup<pageGroup)
                    {
                        var phtml1='';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end=start+5;
                        // console.log("end="+end)

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }else{//此时curPage为最后一组导航
                        var phtml1='';
                        var odd=json.odd;

                        var end=start+odd; //start+odd就ok了

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }

                }



                if(curPage==pagecount)
                {
                    pageBarHtml+='<li class="disabled"> <a>&raquo;</a></li>';
                }else {
                    pageBarHtml+='<li><a style="cursor: pointer;" onclick=\"nextPage('+curPage+')\">&raquo;</a></li>'
                }

                pageBarHtml+='</ul>';



                $('#searchPage').append(pageBarHtml);



            }


        })

    }




    //分页选项change
    function pagechange(pageNum) {

        //刷新分页选中页码
        var old = document.querySelectorAll('#searchPage > ul > li.active')[0];
        var newelem = document.getElementById('p' + pageNum);
        old.classList.remove('active');
        newelem.classList.add('active')

        // var searchPage=document.getElementById('searchPage'); //搜索页div

        $.ajax({
            url: "/web/seckill/seckillSuccessData",
            data: {
                "from": pageNum
            },
            type: "GET",
            success: function (json) {

                document.getElementById('contentBox').innerHTML = ""; //清空所有订单展示
                var html = '';
                html += ' <span>我的秒杀:</span>'
                for (var i = 0; i < json.seckillSuccesses.length; i++) {
                    html += '<div class="textDiv">'
                    html += ' <div style="width: 80px;height: 80px;border: 1px solid; float: left;">'
                    html += '<img style="width: 80px;height: 80px;border:1px solid" src=\"' + json.seckillSuccesses[i].secKill.img + '\"' + '>'
                    html += ' </div>'

                    html += '<div class="infos1">'
                    html += '<div class="head" style="float: left;">'
                    html += '<b>秒杀成功号：</b>'
                    html += '<span>' + json.seckillSuccesses[i].id + '</span></div>'


                    html += '<div class="context" style="float: left;">'
                    html += '<b>商品名称：</b>'
                    html += '<span>' + json.seckillSuccesses[i].secKill.seckillName + '</span>'
                    html += '</div>'


                    html += ' <div class="context">'
                    html += '<b>秒杀数量：</b>'
                    html += '<span>' + 1 + '件</span>'
                    html += ' </div>'
                    html+='</div>'


                    html += '<div class="infos2">'
                    html += '<div class="head">'
                    html += ' <b>秒杀成功时间：</b>'
                    html += '<span>' + json.seckillSuccesses[i].createTime + '</span>'
                    html += '</div>'


                    html += ' <div class="head">'
                    html += ' <b>支付有效时间：</b>'
                    html += '<span>' + '秒杀成功30分钟内</span>'
                    html += '</div>'


                    html += ' <div class="price"> <b>订单价格：</b>'

                    html += '<b style="color: red;">' + json.seckillSuccesses[i].secKill.price + '元</b>'


                    html+='</div>'
                    html+='</div>'

                    if(json.seckillSuccesses[i].state==0){

                        html+='<button style="margin-top: 3%;" type="button" onclick=\"';
                        html+='zhifu('+json.seckillSuccesses[i].id+','+json.seckillSuccesses[i].secKill.seckillId+')\" class="layui-btn layui-btn-danger layui-btn-radius"';
                        html+='>去支付</button>'

                    }

                    if(json.seckillSuccesses[i].state==1){

                        html+='<button style="margin-top: 3%;" type="button" ';
                        html+='class="layui-btn layui-btn-warm layui-btn-radius"';
                        html+='>已支付</button>'
                    }

                    html+='</div>'


                    html += '</div>'
                }


                $('#contentBox').append(html);

                //刷新分页bar

                document.getElementById('searchPage').innerHTML=''; //搜索页div清空

                var pageBarHtml='';

                pageBarHtml+='<ul class="pagination">';

                var curPage=json.curPage;
                var pagecount=json.pagecount;


                var curPageGroup=json.curPageGroup;
                var pageGroup=json.pageGroup;

                if(curPage>1)
                {
                    pageBarHtml+='<li><a style="cursor: pointer;" onclick=\"'+'prePage('+curPage+')'+'\">&laquo;</a></li>'
                }else {
                    pageBarHtml+='<li class="disabled"><a>&laquo;</a> </li>';
                }

                if(pagecount<=5)
                {
                    var phtml1='';
                    for (var i=0;i<pagecount;i++)
                    {
                        if((i+1)==curPage)
                        {
                            phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                        }else {
                            phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                        }
                        phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                        phtml1+='</li>'

                    }
                    pageBarHtml+=phtml1;

                }else {
                    var size=5;
                    var start=size*(curPageGroup-1)     //从哪里开始遍历

                    // console.log("start="+start);

                    //分两种情况，如果不是最后一组导航
                    //为了防止最后一组不足5页的情况，我们需要获取最后一组有多少页
                    if(curPageGroup<pageGroup)
                    {
                        var phtml1='';
                        //因为curPageGroup<pageGroup，所以每一组必定有5页
                        //此时end=start+5
                        var end=start+5;
                        // console.log("end="+end)

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }else{//此时curPage为最后一组导航
                        var phtml1='';
                        var odd=json.odd;

                        var end=start+odd; //start+odd就ok了

                        for (var i=start;i<end;i++)
                        {
                            if((i+1)==curPage)
                            {
                                phtml1+='<li class="active" id=\"'+'p'+(i+1)+'\">';
                            }else {
                                phtml1+='<li id=\"'+'p'+(i+1)+'\">';
                            }
                            phtml1+='<a style="cursor: pointer;" onclick=\"'+'pagechange('+(i+1)+')'+'\">'+(i+1)+'</a>'

                            phtml1+='</li>'
                        }
                        pageBarHtml+=phtml1;

                    }

                }



                if(curPage==pagecount)
                {
                    pageBarHtml+='<li class="disabled"> <a>&raquo;</a></li>';
                }else {
                    pageBarHtml+='<li><a style="cursor: pointer;" onclick=\"nextPage('+curPage+')\">&raquo;</a></li>'
                }

                pageBarHtml+='</ul>';

                $('#searchPage').append(pageBarHtml);



            }

        })

    }


    function kefu(e) {
        $.ajax({
            url:'/web/chat/HasGotoKefu',
            dataType:'json',
            type:'get',
            success:function(result){

                if(result==true){
                    window.location.href='http://localhost:5677/chat/toChat';
                }else {
                    alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                }

            },
            error:function () {
                alert('您可能还没有登录,请登录!')
            }
        })

    }
</script>


</body>
</html>